import React, { useEffect, useState } from "react";
import { Header, Tags } from "../../components";
import "./style.css";
import { Input, Button, Col, Row } from "antd";
import axios from "axios";
import { debounce } from "lodash";

export interface TagsItemType {
  title: string;
  id: string;
  desc: string;
  count: number;
  createTime: string;
}

const Index = () => {
  const [list, setList] = useState<TagsItemType[]>([]);
  const [value, setValue] = useState("");

  const fetchTagsList = async (value = "") => {
    const resp = await axios.get("/api/tags", { params: { value, desc: '首字母' } });
    setList(resp.data.data);
  };

  const handleSearch = () => {
    fetchTagsList(value);
  };

  useEffect(() => {
    fetchTagsList();
  }, []);

  return (
    <div className="tags">
      <Header></Header>
      <Row>
        <Col span={8}>
          <Input.Search
            value={value}
            onChange={(e) => {
              setValue(e.target.value);
            }}
            onSearch={debounce(fetchTagsList, 400)}
          ></Input.Search>
        </Col>
        <Col span={14}></Col>
        <Col span={2}>
          <Button.Group>
            <Button>热门</Button>
            <Button>首字母</Button>
            <Button>最新</Button>
          </Button.Group>
        </Col>
      </Row>
      <Row>
        {list.map((v) => {
          return (
            <Col span={6} className="tags-col" key={v.id}>
              <Tags {...v}></Tags>
            </Col>
          );
        })}
      </Row>
    </div>
  );
};

export default Index;
